<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>输入表</h3>
        <div>
            姓名: <input type="text" name="" id="" v-model="uname">
        </div>
        <div>
            电话: <input type="text" name="" id="" v-model="tel">
        </div>
        <button @click="add">添加</button>
        <button @click="reset">重置</button>
        <!-- 表格 -->
        <table border="1" style="border-collapse: collapse;">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in employees">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.tel }}</td>
                <td>{{ item.time }}</td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr v-if="employees.length === 0">
                <td colspan="5">暂无数据</td>
            </tr>
        </table>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                uname: '',
                tel: '',
                employees: [
                    // {
                    //    id: 10001,
                    //    name: 'zs',
                    //    tel: '1322323',
                    //    time: '2022-10-18 9:00' 
                    // },
                    // {
                    //    id: 10002,
                    //    name: 'lisi',
                    //    tel: '1922323',
                    //    time: '2021-10-18 9:00' 
                    // }
                ]
            },
            methods: {
                add() {
                    if(this.uname === '' || this.tel === '') {
                        alert('姓名或电话不能为空')
                        return
                    }
                    // console.log(this.uname, this.tel);
                    this.employees.push({
                        id: new Date().getTime(),
                        name: this.uname,
                        tel: this.tel,
                        time: new Date().toLocaleTimeString()
                    })
                    // 清空文本框
                    // this.uname = ''
                    // this.tel = ''
                    this.reset()
                },
                del(index) {
                    this.employees.splice(index, 1)
                },
                reset() {
                    this.uname = ''
                    this.tel = ''
                }
            }
        })
    </script>
</body>
</html>